<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../src/css/reset.css" />
		<link rel="stylesheet" type="text/css" href="../../src/css/main.css" />
		<link rel="stylesheet" type="text/css" href="../../libs/leaflet/leaflet.css" />
		<script src="../../libs/leaflet/leaflet.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../libs/leaflet/leaflet.ChineseTmsProviders.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="map"></div>
		<script type="text/javascript"  id="my_script">
			let map = L.map('map', {
				center: [32.444721222054795, 119.4224873962402], // leaflet 所有坐标都是纬度在前,经度在后的
				zoom: 13
			})

			// 地图依赖于leaflet.ChineseTmsProviders.js  他提供4326坐标系的天地图,高德地图等
			let baseLayer = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {
				maxZoom: 18,
				minZoom: 10
			})
			map.addLayer(baseLayer)
			let labelLayer = L.tileLayer.chinaProvider('TianDiTu.Normal.Annotion', {
				maxZoom: 18,
				minZoom: 10
			})
			map.addLayer(labelLayer)

			let polygon = L.polygon([
					[32.44, 119.4],
					[32.45, 119.4],
					[32.45, 119.5],
					[32.44, 119.5],
					[32.44, 119.4]
				])
				.addTo(map)
			let data = getMeasure(polygon.getLatLngs()[0])
			polygon.bindTooltip(`${data}平方米`, {
				permanent: true,
				direction: 'right',
				offset: [10, 0],
			})

			function getMeasure(data) {
				// 这段代码是从 Leaflet Measure Path 插件中找来的 至于为什么.我也不知道.暂时先用着
				let RADIUS = 6378137;
				let ringArea = function ringArea(coords) {
					let rad = function rad(_) {
						return _ * Math.PI / 180;
					};
					let p1, p2, p3, lowerIndex, middleIndex, upperIndex,
						area = 0,
						coordsLength = coords.length;

					if (coordsLength > 2) {
						for (let i = 0; i < coordsLength; i++) {
							if (i === coordsLength - 2) { // i = N-2
								lowerIndex = coordsLength - 2;
								middleIndex = coordsLength - 1;
								upperIndex = 0;
							} else if (i === coordsLength - 1) { // i = N-1
								lowerIndex = coordsLength - 1;
								middleIndex = 0;
								upperIndex = 1;
							} else { // i = 0 to N-3
								lowerIndex = i;
								middleIndex = i + 1;
								upperIndex = i + 2;
							}
							p1 = coords[lowerIndex];
							p2 = coords[middleIndex];
							p3 = coords[upperIndex];
							area += (rad(p3.lng) - rad(p1.lng)) * Math.sin(rad(p2.lat));
						}
						area = area * RADIUS * RADIUS / 2;
					}

					return Math.abs(area);
				};
				return ringArea(data)
			}
		</script>
	</body>
</html>
